<template>
  <h1>表格组件</h1>
  <!-- el-table:这是一个表格组件，用于创建一个可以显示数据的表格。
 :data="tableData":这是表格的数据源属性，通过 :data 绑定到 Vue 实例中的 tableData 数据属性上。
 tableData 应该是一个包含对象的数组，这些对象包含了表格中的每一行数据。
 style="width: 100%":这是内联样式，用于设置表格的宽度为容器的 100% 宽度。
 -->
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="住址" />
  </el-table>
  <hr>
  <el-table :data="arr" style="width:600px;margin: 0 auto;">
    <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
    <el-table-column label="姓名" prop="name" align="center"></el-table-column>
    <el-table-column label="工资" prop="salary" align="center"></el-table-column>
    <el-table-column label="岗位" prop="job" align="center"></el-table-column>
    <el-table-column label="操作">
      <!-- 自定义列模版template -->
      <!-- #default 定义了一个插槽(slot)名为default
      scope就是一个对象,该对象是一个范围对象,可保存上下文数据-->
      <template #default="scope">
        <!-- scope对象保存了当前行数据的索引$index(从0开始)与当前行完整的对象scope.row -->
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {ref} from "vue";

//编写一个表格,有姓名 工资 岗位三列,把表中的数据展示在页面上
const arr = ref([
  {name:'张三',salary:'3000',job:'维修员'},
  {name:'李四',salary:'4000',job:'销售员'},
  {name:'王五',salary:'5000',job:'护林员'},
  {name:'赵六',salary:'6000',job:'程序员'}
]);

const del = (index,emp)=>{
  if (confirm('是否删除?'+emp.name)){
    arr.value.splice(index,1);
  }
}


//下面时在表格组件中显示的具体的数据
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style scoped>

</style>